import React from 'react';
import { useTablePipeline } from 'ali-react-table';
import moment from 'moment';
import { TRDefault } from '@/components/index.js';
import { Tooltip } from 'antd';
import { AntdBaseTable } from '@/base/TBaseTable';
import type { IQueryIssuePlanListDataType } from '../../../type';
import { IExecuteStatusType, ITitleType } from '../../../type';
import {
  statusLastOptions,
  statusFirstOptions,
  statusSecondOptions,
  titleMap,
  new_ExecuteStatusOptions,
} from '../../../dictionary';
import { ExplainTitle } from '../../../components/index';
import styles from './index.less';

interface IProps {
  /**
   * 数据源
   */
  data?: IQueryIssuePlanListDataType[];
  /**
   * 当前展示详情的ID
   */
  id?: number;
  /**
   * 查看
   */
  onShow?: (params: IQueryIssuePlanListDataType) => void;
}

const DeclarePlan = (props: IProps) => {
  const { data = [], id, onShow } = props;

  const _onShow = (record: IQueryIssuePlanListDataType) => {
    onShow && onShow(record);
  };

  const executeStatusTitle = (type: ITitleType) => {
    return (
      <div className={styles.executeStatusTitle}>
        <ExplainTitle title={titleMap[type].title} hintText={titleMap[type].hintText} />
      </div>
    );
  };

  const columns = [
    {
      code: 'issueTime',
      name: '申报时间',
      width: 150,
      align: 'center',
      render(v: string) {
        return v ? moment(v).format('YYYYMMDD HHmm') : '-';
      },
    },
    {
      code: 'dataSourceName',
      name: '下发主站',
      width: 150,
      align: 'center',
      render(v: string) {
        return v || '-';
      },
    },
    {
      code: 'executeStatus',
      name: executeStatusTitle(ITitleType.STATUS_EXECUTE),
      dataIndex: 'executeStatus',
      // title: '执行状态',
      width: 150,
      align: 'center',
      render(v: string, record: any) {
        const _data = new_ExecuteStatusOptions.find((item) => item.value === v);
        return _data ? (
          <div className={styles.executeStatus}>
            <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
            {_data.detail ? (
              <Tooltip placement="bottomLeft" title={record.statusReason}>
                <div style={{ color: 'var(--bd-primary)', height: 20 }}>详情</div>
              </Tooltip>
            ) : (
              ''
            )}
          </div>
        ) : (
          '-'
        );
      },
    },
    {
      code: 'statusFirst',
      name: executeStatusTitle(ITitleType.STATUS_FIRST),
      width: 150,
      align: 'center',
      render(v: string) {
        const _data = statusFirstOptions.find((item) => item.value === v);
        return _data ? (
          <div className={styles.statusLast}>
            <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
          </div>
        ) : (
          '-'
        );
      },
    },
    {
      code: 'statusSecond',
      name: executeStatusTitle(ITitleType.STATUS_SECOND),
      width: 150,
      align: 'center',
      render(v: string) {
        const _data = statusSecondOptions.find((item) => item.value === v);
        return _data ? (
          <div className={styles.statusLast}>
            <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
          </div>
        ) : (
          '-'
        );
      },
    },
    {
      code: 'statusLast',
      name: executeStatusTitle(ITitleType.STATUS_LAST),
      width: 150,
      align: 'center',
      render(v: string) {
        const _data = statusLastOptions.find((item) => item.value === v);
        return _data ? (
          <div className={styles.statusLast}>
            <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
          </div>
        ) : (
          '-'
        );
      },
    },
    {
      code: 'operation',
      name: '操作',
      width: 140,
      align: 'center',
      lock: true,
      render(v: number, record: IQueryIssuePlanListDataType) {
        return (
          <div className={styles.operation} onClick={() => _onShow(record)}>
            查看
          </div>
        );
      },
    },
  ];

  const pipeline = useTablePipeline({})
    .input({ dataSource: data, columns: columns as any })
    .primaryKey('id')
    .appendRowPropsGetter((_row): any => {
      const color = '#222629';
      const otherColor = '#21323E';
      return {
        style: {
          '--bgcolor': id === _row?.id ? otherColor : color,
          '--hover-bgcolor': id === _row?.id ? otherColor : color,
          '--highlight-bgcolor': id === _row?.id ? otherColor : color,
        },
      };
    });

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.title}>
          <ExplainTitle title={titleMap[ITitleType.DECLARE_PLAN].title} />
        </div>
      </div>
      <div className={styles.bottom}>
        {data.length ? (
          <AntdBaseTable
            useVirtual={{ horizontal: true, vertical: true, header: false }}
            style={{
              '--row-height': '28px',
              // '--header-bgcolor': '#383C3E',
              '--header-row-height': '28px',
              '--cell-padding': '4px 16px',
              '--cell-border-vertical': '1px solid #4E5154',
              '--header-cell-border-vertical': '1px solid #4E5154',
              '--hover-bgcolor': '#222629',
            }}
            {...pipeline.getProps()}
          />
        ) : (
          <TRDefault type={'emptysm'} message={'暂无数据'} />
        )}
      </div>
    </div>
  );
};

export default DeclarePlan;
